// fix 在超市上的按钮：已选标签，去创建
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { ShoppingCartOutlined } from '@ant-design/icons';
import { ProCard } from '@ant-design/pro-components';
import { Badge, Button, Popover, Tag } from 'antd';
import { Link, useSearchParams } from 'umi';

import useGroupTags from '../hooks/useGroupTags';

import CrowdExpandAdjustModal from './CrowdExpandAdjustModal';
import GroupTagModal from './GroupTagModal';
const FixedOperation = React.forwardRef((props, ref) => {
  const [searchParams] = useSearchParams();
  const crowd_id = searchParams.get('crowd_id');
  const [selectedGroupTag, setSelectedGroupTag] = useState();
  const [visible, setVisible] = useState(false);
  const dispatch = useDispatch();
  const groupTags = useGroupTags();
  const selectGroupTag = (payload) => {
    dispatch({ type: 'label/selectGroupTag', payload });
  };
  const tagButton = (
    <Badge count={groupTags.length}>
      <ShoppingCartOutlined style={{ cursor: 'pointer', fontSize: '28px' }} />
    </Badge>
  );
  const { dimId, propsGroupTagInfo, ...propConfig } = props;
  return (
    <ProCard ref={ref} {...propConfig}>
      {groupTags.length > 0 ? (
        <Popover
          content={() => {
            return groupTags.map((groupTag, index) => {
              const { groupName } = groupTag.groupTagInfo || {};
              const key = JSON.stringify(groupTag);
              return (
                <Tag
                  key={key}
                  closable
                  style={{ cursor: 'pointer' }}
                  onClick={() => {
                    //如果是穿梭框先不展示模态框
                    if (groupTag.groupName !== '用户PU选择') {
                      setVisible(true);
                      setSelectedGroupTag(groupTag);
                    }
                  }}
                  onClose={() => {
                    dispatch({
                      type: 'label/deleteGroupTag',
                      payload: { index },
                    });
                  }}
                >
                  {groupName}
                </Tag>
              );
            });
          }}
        >
          {tagButton}
        </Popover>
      ) : (
        tagButton
      )}
      <Link
        to={`/tools/user-explorer/config${
          crowd_id ? `?crowd_id=${crowd_id}` : ''
        }`}
      >
        <Button type="primary" style={{ marginLeft: '16px' }}>
          选好了
        </Button>
      </Link>
      <GroupTagModal
        visible={visible}
        onClose={() => setVisible(false)}
        groupTagInfo={selectedGroupTag}
        clearGroupTagInfo={() => setSelectedGroupTag(null)}
        selectGroupTag={selectGroupTag}
        dimId={dimId}
        propsGroupTagInfo={propsGroupTagInfo}
      />
      <CrowdExpandAdjustModal
        groupTagInfo={selectedGroupTag}
        clearGroupTagInfo={() => setSelectedGroupTag(null)}
        selectGroupTag={selectGroupTag}
        dimId={dimId}
        propsGroupTagInfo={propsGroupTagInfo}
      />
    </ProCard>
  );
});

export default FixedOperation;
